<template>
    <view>
        <view class="bg grid-container">
            <view class="grid-content">
                <view
                    v-for="(categoryItem, categoryIndex) in menuList"
                    :key="categoryIndex"
                >
                    <view class="grid-content-title">
                        <view class="grid-content-title-border"></view>
                        <view class="">{{ categoryItem.name }}</view>
                    </view>
                    <view style="display: flex; flex-wrap: wrap; width: 100%;margin-top: 20rpx;">
                        <view v-for="(item, index) in categoryItem.list" :key="index"
                              style="width: 50%;padding: 5px;box-sizing: border-box;"
                        >
                            <view class="grid-item" @click="onJump(item)">
                                <view class="grid-item-icon-box" :style="{background: item.bgColor}">
                                    <u-icon :name="item.icon" size="36" color="#fff" />
                                </view>
                                <view class="grid-item-label">{{item.name}}</view>
                                <view v-if="item.count" class="count-bar">{{ item.count > 99 ? '99+' : item.count }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import permission from "../../../utils/permission";

	export default {
        mixins: [permission],
        data() {
			return {
			    categoryList: [
                    {
                        name: '常规',
                        list: [
                            {
                                id: 1,
                                name: '品种开台',
                                path: '/pages/production/openMachine/index',
                                state: 0,
                                icon: 'play-circle',
                                bgColor: 'rgb(21, 166, 87)',
                                count: 0,
                                pcRouterPath: [
                                    'smOpen', 'btOpen', 'tbOpen', 'mbOpen', 'csOpen', 'xsOpen', 'ltOpen',
                                    'smRenovateOrder', 'btRenovateOrder', 'tbRenovateOrder', 'mbRenovateOrder', 'csRenovateOrder', 'xsRenovateOrder', 'ltRenovateOrder',
                                ]
                            },
                            {
                                id: 2,
                                name: '品种了机',
                                path: '/pages/production/closeMachine/index',
                                state: 0,
                                icon: 'pause-circle',
                                bgColor: 'rgb(21, 166, 87)',
                                count: 0,
                                pcRouterPath: ['smClose', 'btClose', 'tbClose', 'mbClose', 'csClose', 'xsClose', 'ltClose']
                            },
                        ]
                    },
                    {
                        name: '络筒',
                        list: [
                            {
                                id: 4,
                                name: '络筒开了机',
                                path: '/pages/production/ltPrd/machineList/index',
                                state: 2,
                                icon: 'coupon',
                                bgColor: 'rgb(129, 65, 217)',
                                count: 0,
                                pcRouterPath: ['ltMachineList']
                            },
                            {
                                id: 3,
                                name: '开台明细(络筒)',
                                path: '/pages/production/ltPrd/openList/index',
                                state: 1,
                                icon: 'order',
                                bgColor: 'rgb(129, 65, 217)',
                                count: 0,
                                pcRouterPath: ['ltOpenRecord']
                            },
                            {
                                id: 5,
                                name: '锭组设定',
                                path: '/pages/production/ltPrd/setMachineSpinGroup/index',
                                state: 2,
                                icon: 'coupon',
                                bgColor: 'rgb(129, 65, 217)',
                                count: 0,
                                pcRouterPath: ['ltPrd']
                            },
                        ]
                    },
                    {
                        name: '包装',
                        list: [
                            {
                                id: 5,
                                name: '包装计划',
                                path: '/pages/production/packagePrd/packagePlan/index',
                                state: 2,
                                icon: 'order',
                                bgColor: 'rgb(232, 148, 48)',
                                count: 0,
                                pcRouterPath: ['packagePlan']
                            },
                            {
                                id: 5,
                                name: '入库单',
                                path: '/pages/production/packagePrd/inWarehouse/index',
                                state: 1,
                                icon: 'plus-square-fill',
                                bgColor: 'rgb(232, 148, 48)',
                                count: 0,
                                pcRouterPath: ['inWarehouseRecord']
                            },
                            {
                                id: 5,
                                name: '出库单',
                                path: '/pages/production/packagePrd/outWarehouse/index',
                                state: 0,
                                icon: 'minus-square-fill',
                                bgColor: 'rgb(232, 148, 48)',
                                count: 0,
                                pcRouterPath: ['outWarehouseOrder']
                            },
                            /*{
                                id: 5,
                                name: '调拨单',
                                path: '/pages/production/packagePrd/allocateOrder/index',
                                state: 0,
                                icon: 'car',
                                bgColor: 'rgb(232, 148, 48)',
                                count: 0,
                                pcRouterPath: ['allocateOrder']
                            }*/
                        ]
                    },
                    {
                        name: '电子秤',
                        list: [
                            {
                                id: 5,
                                name: '电子称重',
                                path: '/pages/production/electronicWeighing/index',
                                state: 0,
                                icon: 'minus-square-fill',
                                bgColor: 'rgb(129, 65, 217)',
                                count: 0,
                                pcRouterPath: ['any']
                            }
                        ]
                    }
                ]
			};
		},
		onShow() {
            /*let roles = getApp().globalData.roles || [];
            if (roles.includes('sys_admin')) {
                this.categoryList = [
                    this.cg,
                    this.lt,
                    this.bz,
                    this.dzc
                ];
            } else {
                if (roles.includes('BZG')) {
                    let arr = ['包装计划'];
                    let cpData = JSON.parse(JSON.stringify(this.bz));
                    cpData.list = cpData.list.filter(x => arr.includes(x.name));
                    this.categoryList = [cpData];
                } else if (roles.includes('CK')) {
                    let arr = ['入库单', '出库单', '调拨单'];
                    let cpData = JSON.parse(JSON.stringify(this.bz));
                    cpData.list = cpData.list.filter(x => arr.includes(x.name));
                    this.categoryList = [cpData];
                } else {
                    this.categoryList = [
                        this.cg,
                        this.lt,
                    ];
                }
            }*/
            this.menuList = this.getMenuListPermission(this.categoryList);
        },
		methods: {
			onJump({path, state}) {
                if (path) {
                    wx.navigateTo({
                        url: path + `?state=${state}`
                    });
                } else {
                    wx.showToast({
                        title: '敬请期待',
                        icon: 'error'
                    })
                }
			}
		}
	}
</script>
<style scoped lang="scss">
@import "./grid";
</style>
